<!-- 产品详情 ：产品介绍、产品规格、产品售后 -->
<template>
  <div class="intro">
    <van-tabs
      v-model="active"
      scrollspy
      sticky
      color="blue"
      title-active-color="blue"
    >
      <van-tab title="核酸检测">
        <div class="intro-cont">
          <h3>核酸检测</h3>
          <ul class="list">
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="接种点">
        <div class="intro-cont">
          <h3>接种点</h3>

          <ul class="list">
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
            <li>
              <img src="../../assets/images/核酸检测图片.png" alt="" />
              <span>合肥市 瑶海...</span>
              <div>
                <em>瑶海区核酸检测</em>
                <p>定点检测,快速采样,防...</p>
                <p>瑶海区铜陵路街道社区...</p>
                <i>￥60</i>
              </div>
              <button>立刻购买</button>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.intro {
  position: relative;
  margin: 0 auto;
  width: 750px;
  .intro-cont {
    height: 990px;
    padding: 0.2rem;
    background: rgb(248, 248, 248);
    h3 {
      border-radius: 10px;
      line-height: 50px;
    }
    .list {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      height: 940px;
      background: rgb(248, 248, 248);
      li {
        text-align: center;
        position: relative;
        background: rgb(255, 255, 255);
        border-radius: 15px;
        width: 170px;
        height: 300px;
        img {
          border-radius: 15px 15px 0 0;
          width: 170px;
          background-color: rgb(232, 232, 232);
        }
        span {
          position: absolute;
          top: 5px;
          left: 5px;
          display: block;
          width: 100px;
          text-align: center;
          color: white;
          border-radius: 15px;
          background-color: rgb(133, 133, 133);
        }
        div {
          text-align: left;
          padding: 5px;
          em {
            display: block;
            font-weight: bold;
          }
          p {
            color: rgb(173, 173, 173);
          }
          i {
            color: blue;
            font-weight: bold;
          }
        }
        button {
          width: 150px;
          line-height: 30px;
          color: #fff;
          border-radius: 15px;
          background-color: rgb(0, 115, 255);
          border: none;
        }
      }
    }
  }
}

@media (max-width: 750px) {
  .intro {
    width: auto;
  }
}
</style>
